<template>
    <div id="history">
        <div class="flitercon">
            <div class="fliteritem" style="width: 30%;">
                发布设备：
                <el-select v-model="deviceId" @change="selDevice" clearable placeholder="选择情报板设备" style="width: 240px">
                    <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div class="fliteritem" style="width: 40%;">
                发布时间：
                <el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="time"
                    @change="selTime" type="datetimerange" range-separator="到" start-placeholder="开始时间"
                    end-placeholder="结束时间" />
            </div>
            <div class="fliteritem" style="width: 20%;justify-content: flex-end;">
                <el-button :icon='Upload' type="primary"  @click="exporExcel('发布历史')">
                    导出
                </el-button>
            </div>
        </div>

        <el-scrollbar height="calc(100vh - 215px)">
            <div class="ledgerList"
                style="background-color: #2F4052;padding: 0 10px;padding-top: 10px; padding-bottom: 10px;">
                <el-table id="out" border :data="HisList" style="width: 100%; ">
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column label="情报板信息" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.device_info ? scope.row.device_info.name : '' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布内容">
                        <template #default="scope">
                            <div :style="{ color: formatColor(scope.row.font_color) }">{{ scope.row.content }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" width="280">
                        <template #default="scope">
                            <div>{{ scope.row.gmt_modified }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column></el-table-column> -->
                </el-table>
                <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
            </div>
        </el-scrollbar>

    </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import FileSaver from "file-saver";
import * as XLSX from 'xlsx';
import { mainStore } from "../../store/index";
import pagination from '../../components/pagination.vue';
import {
    Upload
} from '@element-plus/icons-vue'
import $sys from "../../api/sys";
const $store = mainStore();
const deviceId = ref('');
const time = ref();
onMounted(() => {
    getDeviceList();
    setTimeout(() => {
        getHisList();
    }, 50);
})
function selTime(e) {
    if (e) {
        page.start_time = e[0];
        page.end_time = e[1];
    } else {
        page.start_time = '';
        page.end_time = '';
    }
    page.pagenum = 1;
    getHisList();
}
function selDevice(e) {
    page.device_id = e;
    page.pagenum = 1;
    getHisList();
}
function formatColor(string) {
    const r = string.substring(0, 3);
    const g = string.substring(3, 6);
    const b = string.substring(6, 9);
    const a = string.substring(9, 12);
    return `rgba(${r},${g},${b},1)`;
}
function getsize(e) {
    page.pagesize = e;
    getHisList();
}
function getpage(e) {
    page.pagenum = e;
    getHisList();
}
const page = reactive({
    pagenum: 1,
    pagesize: 20,
    total: 0
})
const HisList = ref([]);
function getHisList() {
    $sys.getHisList(page).then(res => {
        if (res.code == 200) {
            HisList.value = [];
            res.data.result.forEach((item, index) => {
                DeviceList.value.forEach((ite, ind) => {
                    if (item.device_id == ite.id) {
                        item.device_info = ite;
                    }
                })
                HisList.value.push(item);
            })
            page.total = res.data.count;
        }
    })
}
const DeviceList = ref([]);
function getDeviceList() {
    $sys.deviceList().then(res => {
        if (res.code == 200) {
            DeviceList.value = res.data
        }
    })
}
const exporExcel = (title) => {
    var wb = XLSX.utils.table_to_book(
        document.querySelector("#out")
    );
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: 'array',
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            title + ".xlsx"
        );
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
    }
    return wbout;
};
</script>

<style scoped>
.ledgerList::-webkit-scrollbar {
    width: 5px;
}

.ledgerList::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.ledgerList::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}

:deep(*) {
    font-size: 16px;
}

#history {
    /* background-color: #2F4052; */
    width: 100%;
    /* padding: 0 20px; */
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
    background-color: #34475b !important;
    border: 1px solid #2b3b4b !important;
    box-shadow: none !important;

}

:deep(.el-date-editor .el-range-separator) {
    color: white !important;
}

.flitercon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    background-color: #2F4052;
    height: 70px;
    margin-bottom: 10px;
}

.fliteritem {
    display: flex;
    align-items: center;
    color: white;
}
</style>

<style lang='less'>
// 时间范围选择框样式
.el-picker-panel {
    background-color: #2f4052;
}

.el-date-table td .el-date-table-cell .el-date-table-cell__text {
    color: #b2c9ee;
}

.el-picker-panel__footer {
    background: #263343;
    border-top: 1px #222e3b solid;
}

.el-date-range-picker__time-header {
    border-bottom: 1px #222e3b solid;
}

.el-picker__popper.el-popper {
    border: 1px #222e3b solid;
}

.el-picker-panel__icon-btn {
    color: #b2c9ee;
}

.el-picker-panel {
    color: #b2c9ee;
}

.el-date-table th {
    color: #b2c9ee;
    border-bottom: 1px #222e3b solid;
}

.el-date-range-picker__content.is-left {
    border-right: 1px #222e3b solid;
}

.el-button.is-disabled {
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-button.is-plain {
    --el-button-hover-bg-color: #1b95f8;
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-date-table td.in-range .el-date-table-cell {
    background-color: #222e3b
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-date-table td.in-range .el-date-table-cell:hover {
    background: #222e3b;
}

// .el-button{background: #1b95f8;border: 1px #222e3b solid;}
.el-button.is-text:not(.is-disabled):hover {
    background: #888;
    border: 1px #222e3b solid;
}

.el-input.is-disabled .el-input__wrapper {
    background: #222e3b;
}

.el-input.is-disabled .el-input__inner {
    color: #b2c9ee;
}

.el-input__inner {
    color: #b2c9ee;
}

.el-date-editor .el-range-input {
    color: #aaa;
}

#history {
    .el-scrollbar__view {
        height: calc(100vh - 310px);
        border-bottom: 1px #263342 solid;
    }

    .el-table {
        background: #304053;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: none;
    }

    .el-table__inner-wrapper {
        &::before {
            display: none;
        }
    }

    // 头部样式
    .el-table__header-wrapper th {
        background-color: #2F4052;
        color: #fff;
    }

    // 内容行样色
    .el-table__row {
        background-color: #2F4052;
        color: #B2C9EE;
    }

    // 内容行边框
    .el-table__cell {
        border: 1 !important;
        border-color: #222e3b;
    }

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table__border-left-patch {
        background-color: #263342;
    }

    //自定义斑马线和鼠标移入样式
    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
        background-color: #263343 !important;
    }

    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: #2F4052 !important;
    }

    .el-table__body tr:nth-child(even) {
        background-color: #263343;
        /* 偶数行（斑马线）的默认背景色 */
    }

}
</style>